<template>
  <div class="liteflow-editor-properties-editor">
    <a-form
      layout="vertical"
      :model="formData"
      @valuesChange="handleChange"
    >
      <a-form-item v-if="isWhenNode" label="Any（any）">
        <a-select v-model="formData.any" allow-clear>
          <a-select-option :value="true">是</a-select-option>
          <a-select-option :value="false">否</a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item label="唯一标识（id）">
        <a-input v-model="formData.id" allow-clear />
      </a-form-item>
      <a-form-item label="标签（tag）">
        <a-input v-model="formData.tag" allow-clear />
      </a-form-item>
      <a-form-item label="超时(maxWaitSeconds)">
        <a-input v-model="formData.maxWaitSeconds" allow-clear />
      </a-form-item>
    </a-form>
  </div>
</template>

<script>
import { debounce } from 'lodash';
import { history } from '../../core/history/index.js';
import { ConditionTypeEnum } from '../../core/constant/index.js';

export default {
  name: 'ConditionPropertiesEditor',
  props: {
    model: {
      type: Object,
      required: true,
    },
  },
  data() {
    const properties = this.model.getProperties();
    return {
      formData: {
        ...properties,
      },
    };
  },
  computed: {
    isWhenNode() {
      return this.model.type === ConditionTypeEnum.WHEN;
    },
  },
  watch: {
    model: {
      handler(newModel) {
        const properties = newModel.getProperties();
        this.formData = {
          ...properties,
        };
      },
      immediate: true,
    },
  },
  created() {
    this.handleChange = debounce(this._handleChange, 200);
  },
  methods: {
    _handleChange() {
      // 更新模型属性
      this.model.setProperties({ ...this.model.getProperties(), ...this.formData });
      
      // 推送历史记录
      history.push(undefined, { silent: true });
    },
  },
};
</script>

<style lang="less" scoped>
.liteflow-editor-properties-editor {
  padding: 16px;
}
</style>
